<template>
    <div class="sideBar-container">
        <div style="height: 50px;"></div>
        <div class="item" style="background-color: aliceblue;">
            <img class="innerItem"  src="logo_64.png" />
        </div>
        <div @click="selectChat" class="item" style="height: 30px; width: 30px;">
            <img class="innerItem" s :src="chatSelected? 'chatselected.png':'chat.png'" />
        </div>
        <div @click="selectUser" class="item" style="height: 30px; width: 30px;">
            <img class="innerItem" :src="userSelected? 'userselected.png':'user.png'" />
        </div>

        <div @click="selectSetting" class="item" style="height: 30px; width: 30px; margin-top: auto;">
            <img class="innerItem" :src="settingselected? 'settingselected.png':'setting.png'" />
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref, watch} from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const props = defineProps<{
    currentContent:number
}>()
const emit = defineEmits<{
    (ev:'menuChange',current:number):void
}>()
watch(props,(newv,oldv) => {
    console.log(newv.currentContent);
    switch(newv.currentContent) {
        case 0:{
            chatSelected.value = true
            userSelected.value = false
            settingselected.value = false
        }break
        case 1:{
            chatSelected.value = false
            userSelected.value = true
            settingselected.value = false
        }break;
    }    
})
const chatSelected = ref(true)
const userSelected = ref(false)
const settingselected = ref(false)

const selectChat = () => {
    chatSelected.value = true
    userSelected.value = false
    settingselected.value = false
    // router.push('/chat')
    emit('menuChange',0)
}
const selectUser = () =>{
    chatSelected.value = false
    userSelected.value = true
    settingselected.value = false
    // router.push('/friendList')
    emit('menuChange',1)
}
const selectSetting = () => {
    chatSelected.value = false
    userSelected.value = false
    settingselected.value = true
    // emit('menuChange',2)
}
</script>
<style scoped>
.sideBar-container{
    width: 70px;
    background-color: rgb(65, 65, 65);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.item {
    height: 45px;
    width: 45px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;

}
.innerItem{
    height: 100%;
    width: 100%;
}
</style>